<template>
  <div class="new_album_list">
    <el-tabs v-model="activeName" @tab-click="handleClick">
        <el-tab-pane label="全部" name="first">
          <NewSongsList :area="area[0]"></NewSongsList>
        </el-tab-pane>
        <el-tab-pane label="华语" name="second">
          <NewSongsList :area="area[1]"></NewSongsList>
        </el-tab-pane>
        <el-tab-pane label="欧美" name="third">
          <NewSongsList :area="area[2]"></NewSongsList>
        </el-tab-pane>
        <el-tab-pane label="韩国" name="fourth">
          <NewSongsList :area="area[3]"></NewSongsList>
        </el-tab-pane>
        <el-tab-pane label="日本" name="fifth">
          <NewSongsList :area="area[4]"></NewSongsList>
        </el-tab-pane>
      </el-tabs>
  </div>
</template>

<script>
import NewSongsList from './NewSongsList.vue'
export default {
  components: {
    NewSongsList
  },
  data () {
    return {
      area: [0, 7, 96, 16, 8],
      activeName: 'first'
    }
  },
  methods: {
    handleClick (tab, event) {
      // console.log(tab, event)
    }
  },
  created () {}
}
</script>

<style lang="less" scoped>
  .new_album_list {
    margin:0 auto 20px;
  }
</style>
